<template>
	<view class="payOrder">
		<view class="payType">
			<view class="title">支付方式</view>
			<view class="weChatBox" @click="changePayType('0')">
				<image src="../../static/img/detail/weixin-select.png" class="icon"></image>
				<view class="name">微信支付</view>
				<image src="../../static/img/active/select.png" class="select" v-if="payType == '0'"></image>
				<image src="../../static/img/active/no-select.png" class="select" v-if="payType != '0'"></image>
			</view>
			<view class="couponBox" v-if="payType=='0'&&myCouponList.length>0">
				<view class="titleBox">
					<view class="title">选择优惠券</view>
					<view class="discount" v-if="discount_certificate_id">
						{{myCouponTitle}}—抵扣:{{Sub(shouldPayPrice,actualPayPrice)}}元
					</view>
				</view>
				<scroll-view scroll-y="true" class="couponList">
					<view class="couponItem" v-for="(item,index) in myCouponList" :key="index"
						@click="selectDiscountCertificate(item)">
						<image src="../../static/img/active/coupon.png" class="itemBg"></image>
						<view class="itemInfo">
							<view class="value" v-if="item.value!='0.0'">{{item.value*10}}折</view>
							<view class="value" v-else>免单</view>
							<view class="infoOther">
								<view class="name">{{item.title}}</view>
								<view class="time">有效期：{{item.endtime}}</view>
							</view>
							<image src="../../static/img/active/select.png" class="select"
								v-if="discount_certificate_id==item.id"></image>
							<image src="../../static/img/active/no-select.png" class="select"
								v-if="discount_certificate_id!=item.id">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 	<view class="noData" v-if="payType=='0'&&myCouponList.length==0">
				<image src="/static/img/common/nodata.png" class="image"></image>
				<view class="text">暂无可用折扣券～</view>
			</view> -->
			<view class="weChatBox" @click="changePayType('2')">
				<image src="../../static/img/detail/yue-select.png" class="icon"></image>
				<view class="name">余额支付</view>
				<view class="money" v-if="userInfo">¥{{userInfo.money}}</view>
				<image src="../../static/img/active/select.png" class="select" v-if="payType == '2'"></image>
				<image src="../../static/img/active/no-select.png" class="select" v-if="payType != '2'"></image>
			</view>
			<view class="weChatBox" @click="changePayType('6')">
				<image src="../../static/img/money/reCharge.png" class="icon"></image>
				<view class="name">次卡支付</view>
				<image src="../../static/img/active/select.png" class="select" v-if="payType == '6'"></image>
				<image src="../../static/img/active/no-select.png" class="select" v-if="payType != '6'"></image>
			</view>
			<!-- 	<view class="couponBox" v-if="payType=='0'">
				<image src="../../static/img/active/coupon-icon.png" class="icon"></image>
				<view class="name">优惠券</view>
				<view class="discount" v-if="discount_certificate_id">
					{{myCouponTitle}}
					-{{shouldPayPrice-actualPayPrice}}
				</view>
				<image src="../../static/img/active/you.png" class="arrow" @click="showCoupon"></image>
			</view> -->
		</view>
		<view class="secondaryCard" v-if="payType=='6'">
			<view :class="card_order_id==item.id?'cardItem select':'cardItem'" v-for="(item,index) in myCardList"
				:key="index" @click="selectCard(item)">
				<image :src="item.image" class="image"></image>
				<view class="cardCenter">
					<view class="number">{{item.card_name}}</view>
					<view class="time">{{item.endtime}}</view>
				</view>
				<view class="money">{{item.surplus_frequency}}/{{item.frequency}}</view>
			</view>
		</view>
		<view v-if="payType=='6'&&myCardList.length==0" class="pay" @click="payCard">购买次卡，点击此处</view>
		<view v-else class="pay" @click="orderPay">{{actualPayPrice?'¥'+actualPayPrice:''}} 去支付</view>
		<uni-popup ref="popup" :mask-click="false" :safe-area="false">
			<view class="couponBox">
				<view class="titleBox">
					<view class="close"></view>
					<view class="title">选择优惠券</view>
					<image src="../../static/img/index/close.png" @click="closeCoupon" class="close"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 720rpx;" v-if="myCouponList.length>0">
					<view class="couponList">
						<view class="couponItem" v-for="(item,index) in myCouponList" :key="index"
							@click="selectDiscountCertificate(item)">
							<image src="../../static/img/active/coupon.png" class="itemBg"></image>
							<view class="itemInfo">
								<view class="value" v-if="item.value!='0.0'">{{item.value*10}}折</view>
								<view class="value" v-else>免单</view>
								<view class="infoOther">
									<view class="name">{{item.title}}</view>
									<view class="time">有效期：{{item.endtime}}</view>
								</view>
								<image src="../../static/img/active/select.png" class="select"
									v-if="discount_certificate_id==item.id"></image>
								<image src="../../static/img/active/no-select.png" class="select"
									v-if="discount_certificate_id!=item.id">
								</image>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="noData" v-if="myCouponList.length==0">
					<image src="/static/img/common/nodata.png" class="image"></image>
					<view class="text">暂无可用折扣券～</view>
				</view>

				<view class="confirm" @click="selectCoupon">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getCouponList,
		getMyCardList
	} from "@/api/active.js"
	import {
		getUserInfo
	} from '@/api/api.js'
	import {
		orderPay,
		getMoneyAmount
	} from "@/api/equip.js"
	export default {
		data() {
			return {
				payType: '0', //0微信 1支付宝 2余额  6次卡
				order_sn: '', //订单编号
				venues_id: '', //场馆id
				myCardList: [],
				card_order_id: null, //次卡id
				myCouponList: [],
				userInfo: null, //用户信息
				shouldPayPrice: '', //应该支付金额
				actualPayPrice: '', //实际支付金额
				discount_certificate_id: null, //折扣券id
			}
		},
		onLoad(options) {
			if (options && options.order_sn) {
				this.order_sn = options.order_sn
				this.venues_id = options.venues_id
				this.getMoneyAmount()
			}
		},
		onShow() {
			this.getUserInfo()
			this.getMyCardList()
			this.getCouponList()
		},
		computed: {
			myCouponTitle() {
				if (!this.discount_certificate_id) {
					return ""
				} else {
					let index = 0;
					for (var i = 0; i < this.myCouponList.length; i++) {
						if (this.myCouponList[i].id == this.discount_certificate_id) {
							index = i
						}
					}
					return this.myCouponList[index].title
				}
			},
		},
		methods: {
			Sub(arg1, arg2) {
				arg1 = parseFloat(arg1);
				arg2 = parseFloat(arg2);
				var r1, r2, m, n;
				try {
					r1 = arg1.toString().split(".")[1].length
				} catch (e) {
					r1 = 0
				}
				try {
					r2 = arg2.toString().split(".")[1].length
				} catch (e) {
					r2 = 0
				}
				m = Math.pow(10, Math.max(r1, r2));
				//动态控制精度长度
				n = (r1 >= r2) ? r1 : r2;
				return ((this.Mul(arg1, m) - this.Mul(arg2, m)) / m).toFixed(n);
			},
			Mul(arg1, arg2) {
				arg1 = parseFloat(arg1);
				arg2 = parseFloat(arg2);
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
			},
			payCard() {
				uni.navigateTo({
					url: '/pages/active/numCard?venues_id=' + this.venues_id
				})
			},
			orderPay() {
				if (this.payType == 6 && !this.card_order_id) {
					return uni.showToast({
						icon: "none",
						title: "请选择次卡"
					})
				}
				let that = this
				uni.showLoading({
					mask: true
				})
				orderPay({
					order_sn: this.order_sn,
					pay_type: this.payType,
					card_order_id: this.card_order_id,
					discount_certificate_id: this.discount_certificate_id
				}).then(res => {
					uni.hideLoading()
					if (res.code != 1) return
					if (res.data.is_pay) {
						that.paySuccess()
					} else {
						if (this.payType == '0') {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.params.timeStamp,
								nonceStr: res.data.params.nonceStr,
								package: res.data.params.package,
								signType: res.data.params.signType,
								paySign: res.data.params.paySign,
								success: function(res) {
									that.paySuccess()
								},
								fail: function(err) {
									uni.showToast({
										icon: "none",
										title: "支付失败"
									})
								}
							});
						} else {
							that.paySuccess()
						}
					}
				})
			},
			//支付成功
			paySuccess() {
				this.getUserInfo()
				uni.showToast({
					icon: "none",
					title: "支付成功"
				})
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)
			},
			getUserInfo() {
				getUserInfo().then(res => {
					this.userInfo = res.data
					uni.setStorageSync('user', res.data)
				})
			},
			//选择次卡
			selectCard(item) {
				this.card_order_id = item.id
				this.getMoneyAmount()
			},
			//选择优惠券
			selectDiscountCertificate(item) {
				this.discount_certificate_id = item.id
				this.getMoneyAmount()
			},
			getMoneyAmount() {
				getMoneyAmount({
					order_sn: this.order_sn,
					pay_type: this.payType,
					card_order_id: this.card_order_id,
					discount_certificate_id: this.discount_certificate_id
				}).then(res => {
					this.shouldPayPrice = res.data.shouldPayPrice //应该支付金额
					this.actualPayPrice = res.data.actualPayPrice //实际支付金额
				})
			},
			changePayType(type) {
				this.payType = type
				this.discount_certificate_id = null
				this.card_order_id = null
				this.getMoneyAmount()
				if (this.payType == 6 && this.myCardList.length == 0) {
					return uni.showToast({
						icon: "none",
						title: "暂未购买此场馆的次卡"
					})
				}
				if (this.payType == 0 && this.myCouponList.length > 0) {
					this.discount_certificate_id = this.myCouponList[0].id
				}
				if (this.payType == 6 && this.myCardList.length > 0) {
					this.card_order_id = this.myCardList[0].id
				}
			},
			//获取我的折扣券列表
			getCouponList() {
				getCouponList({
					venues_id: this.venues_id
				}).then(res => {
					this.myCouponList = res.data
					if (this.payType == 0 && this.myCouponList.length > 0) {
						this.discount_certificate_id = this.myCouponList[0].id
						this.getMoneyAmount()
					}
				})
			},
			//获取我的次卡列表
			getMyCardList() {
				getMyCardList({
					venues_id: this.venues_id
				}).then(res => {
					this.myCardList = res.data
					if (this.payType == 6 && this.myCardList.length > 0) {
						this.card_order_id = this.myCardList[0].id
					}
				})
			},
			//关闭弹窗
			closeCoupon() {
				this.$refs.popup.close()
			},
			//展开弹窗
			showCoupon() {
				if (this.myCouponList.length == 0) {
					return uni.showToast({
						icon: "none",
						title: "没有获得折扣券"
					})
				}

				this.$refs.popup.open('bottom')
			},
			//选择折扣券
			selectCoupon() {
				this.$refs.popup.close()
				this.getMoneyAmount()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		padding: 30rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 200rpx;
			height: 200rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}

	.payOrder {
		min-height: 100vh;
		background-color: #F8F8F8;
	}

	.couponBox {
		background-color: #ffffff;
		padding-bottom: 20rpx;

		.titleBox {
			padding: 20rpx 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.discount {
				font-size: 28rpx;
				color: #F13933;
			}
		}

		.couponList {
			height: 400rpx;

			.couponItem {
				position: relative;
				height: 152rpx;
				margin: 0rpx 28rpx 20rpx;

				.itemBg {
					position: absolute;
					width: 100%;
					height: 100%;
				}

				.itemInfo {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: relative;
					height: 100%;
					z-index: 1;

					.value {
						width: 176rpx;
						text-align: center;
						font-size: 60rpx;
						color: #F13933;
						font-weight: 600;
						border-right: 2rpx dashed #F6DCD3;
					}

					.infoOther {
						flex: 1;
						margin-left: 32rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.name {
							font-size: 32rpx;
							color: #F13933;
							margin-bottom: 20rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.select {
						width: 36rpx;
						height: 36rpx;
						margin-right: 40rpx;
					}
				}

			}
		}

		.confirm {
			margin: 20rpx auto 0;
			width: 694rpx;
			height: 88rpx;
			background: #3EB9FF;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			line-height: 88rpx;
		}
	}

	.payType {
		margin-bottom: 38rpx;

		.title {
			margin: 0rpx 28rpx;
			padding: 20rpx 0;
			font-size: 26rpx;
			color: #999999;
		}

		.weChatBox,
		.couponPay {
			height: 100rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 28rpx;
			background: #FFFFFF;

			.icon {
				width: 48rpx;
				height: 48rpx;
			}

			.name {
				margin-left: 18rpx;
				flex: 1;
			}

			.money {
				color: #F13933;
				margin-right: 18rpx;
			}

			.discount {
				flex: 1;
				font-size: 28rpx;
				color: #F13933;
				text-align: right;
				margin-right: 18rpx;
			}

			.select,
			.arrow {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.couponPay {
			margin-top: 2rpx;
		}
	}

	.secondaryCard {
		margin: 0rpx 28rpx;

		.cardItem {
			padding: 34rpx 20rpx;
			margin-bottom: 20rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;

			.image {
				width: 92rpx;
				height: 92rpx;
				border-radius: 10rpx;
				margin-right: 16rpx;
			}

			.cardCenter {
				flex: 1;

				.number {
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}

				.time {
					margin-top: 8rpx;
					font-size: 28rpx;
					color: #666666;
				}
			}

			.money {
				font-size: 32rpx;
				color: #FF4D00;
			}
		}

		.select {
			border: 4rpx solid #3EB9FF;
		}
	}

	.pay {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 694rpx;
		height: 88rpx;
		background: #3EB9FF;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
		line-height: 88rpx;

	}
</style>